{namespace esn.soy.survey}

/**
 * @param QuestionList
 */
{template .questionList}
<div class="questionList">
  {foreach $question in $QuestionList}
    {if $question.TYPE == esn.constants.QuestionType.SLIDER}
      {call .sliderQuestion}
        {param Number: index($question) + 1 /}
        {param Question: $question /}
      {/call}
    {else}
      {call .question}
        {param Number: index($question) + 1 /}
        {param Question: $question /}
      {/call}
    {/if}
  {/foreach}
</div>
{/template}

/**
 * @param Number
 * @param Question
 */
{template .question}
<div class="questionSection {call .inlineCss data="all" /}">
  <div class="questionContainer">
    <div class="number">{$Number}.</div>
    <div class="question">{$Question.QUESTION|noescape}</div>
    <!-- If this is an INPUT_INLINE put the answer here. -->
    {if $Question.TYPE == esn.constants.QuestionType.INPUT_INLINE}
      {call .answer}
        {param Id: $Question.ID + '-' + $Question.POSSIBLE_ANSWERS[0] /}
        {param Name: $Question.ID /}
        {param Answer: $Question.POSSIBLE_ANSWERS[0] /}
        {param QuestionType: $Question.TYPE /}
        {param InputSize: $Question.INPUT_SIZE /}
      {/call}
    {/if}
    <div style="clear: both;"></div>
  </div>
  {if $Question.TYPE != esn.constants.QuestionType.INPUT_INLINE}
    <div class="answerContainer">
      {foreach $answer in $Question.POSSIBLE_ANSWERS}
        {call .answer}
          {param Id: $Question.ID + '-' + $answer /}
          {param Name: $Question.ID /}
          {param Answer: $answer /}
          {param QuestionType: $Question.TYPE /}
          {param InputSize: $Question.INPUT_SIZE /}
        {/call}
      {/foreach}
    </div>
  {/if}
</div>
{/template}

/**
 * @param Question
 */
{template .notApplicableCheckbox}
<div class="notApplicableContainer">
  <input type="checkbox" id="notApplicableCheckbox-{$Question.ID}" value="N/A">{sp}
  <label for="notApplicableCheckbox-{$Question.ID}">
    Not applicable, don't know or refused.
  </label>
</div>
{/template}

/**
 * @param Number
 * @param Question
 */
{template .sliderQuestion}
<div class="questionSection sliderQuestion">
  <div class="questionContainer">
    <div class="number">{$Number}.</div>
    <div class="question">
      <table>
        <tr>
          <td class="questionTd">{$Question.QUESTION|noescape}</td>
          <td>
            <div class="answerContainer">
              <div class="sliderContainer">
                <div class="slider"><div class="goog-slider-scale" ></div></div>
                <div class="sliderValue">select a value</div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
{/template}

/**
 * @param Id
 * @param Name
 * @param Answer
 * @param QuestionType
 * @param InputSize
 */
{template .answer}
  {if $Answer == esn.constants.AnswerType.INPUT}
    <div class="answer">
      <input type="text" id="{$Id}" name="{$Name}" size="{call .inputSize data="all" /}"
          class="">
    </div>
  {elseif $Answer == esn.constants.AnswerType.OTHER}
    <div class="answer">
      <input type="{$QuestionType}" id="{$Id}" name="{$Name}"
          value="{esn.constants.AnswerType.OTHER}">{sp}
      <label for="{$Id}">Other</label>{sp}
      <input type="text" id="{$Id}:{esn.constants.AnswerType.INPUT}"
          size="{call .inputSize data="all" /}">
    </div>
  {else}
    <div class="answer">
      <input type="{$QuestionType}" id="{$Id}" name="{$Name}" value="{$Answer}">{sp}
      <label for="{$Id}">{$Answer}</label>
    </div>
  {/if}
{/template}

/**
 * @param Question
 */
{template .inlineCss}
  {if $Question.TYPE == esn.constants.QuestionType.INPUT_INLINE}
    inlineAnswer
  {/if}
{/template}

/**
 * @param InputSize
 */
{template .inputSize}
  {if $InputSize}
    {$InputSize}
  {else}
    esn.constants.DEFAULT_INPUT_SIZE
  {/if}
{/template}
